<template>
  <div class="offerforsale">
    <el-row>
      <el-col :span="16">
        <div class="grid-content bg-purple-dark">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="form.brand"></el-input>
            </el-form-item>

            <el-form-item label="价格" prop="price">
              <el-input v-model="form.price">
                <template slot="append">万元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="上牌时间" prop="card_time">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.card_time"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="行驶里程" prop="mile">
              <el-input v-model="form.mile">
                <template slot="append">公里</template>
              </el-input>
            </el-form-item>
            <el-form-item label="排量" prop="displacement">
              <el-input v-model="disp">
                <template slot="append"
                  ><i class="el-icon-refresh" v-if="isDisplacement" @click="setDisplacement"> T </i></template
                >
                <template slot="append"
                  ><i class="el-icon-refresh" v-if="!isDisplacement" @click="setDisplacement"> L </i></template
                ></el-input
              >
            </el-form-item>
            <el-form-item label="变速箱" prop="gearbox">
              <el-radio-group v-model="form.gearbox">
                <el-radio-button label="手动"></el-radio-button>
                <el-radio-button label="自动"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="所在城市" prop="city_name">
              <div>
                <CityList @updataname="updataname"></CityList>
              </div>
            </el-form-item>
            <el-form-item label="车辆类型" prop="model">
              <el-radio-group v-model="form.model">
                <el-radio-button label="SUV"></el-radio-button>
                <el-radio-button label="轿车"></el-radio-button>
                <el-radio-button label="跑车"></el-radio-button>
                <el-radio-button label="面包车"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="事故情况" prop="accident_situation">
              <el-radio-group v-model="form.accident_situation">
                <el-radio-button label="无事故"></el-radio-button>
                <el-radio-button label="轻微"></el-radio-button>
                <el-radio-button label="严重"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="owner_phone">
              <el-input v-model="form.owner_phone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">回收车辆</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CityList from '@/views/components/ascader.vue'
import rules from './rules'
import { recoveryCar } from '@/api/cart'
export default {
  name: 'OfferForSale',
  components:{CityList},
  data() {
    return {
      city: '',
      disp: '', // pailiang
      isDisplacement: true, // true wei T
      rules: rules,
      form: {
        // ：品牌
        brand: '',
        // 价格
        price: '',
        // ：上牌事件
        card_time: '',
        // ：行驶
        mile: '',
        displacement: '',
        // ：变速
        gearbox: '',
        // ：城市
        city_name: '',
        // ：车辆里程
        model: '',
        // ：事故情况
        accident_situation: '',
        // ：车主手机号
        owner_phone: ''
      }
    }
  },
  watch: {
    // 排量
    disp: function (value) {
      this.form.displacement = this.isDisplacement ? value + 'T' : value + 'L'
    },
    // 排量
    isDisplacement: function (value) {
      this.form.displacement = value ? this.disp + 'T' : this.disp + 'L'
    },
    // 上牌时间
    'form.card_time': {
      deep: true,
      handler: function (value, old) {
        console.log(value, old)
        const year = new Date(value).getFullYear()
        let month = new Date(value).getMonth() + 1
        const day = new Date(value).getDate()
        this.form.card_time = year + '-' + month + '-' + day
      }
    }
  },
  methods: {
    updataname(name) {
      this.form.city_name = name
    },
    //切换TL
    setDisplacement() {
      this.isDisplacement = !this.isDisplacement
    },
    onSubmit() {
      this.$refs.form.validate(async valid => {
        // 提交数据前校验
        console.log(this.form)
        if (valid) {
          const res = await recoveryCar(this.form)
          if (res.data.statu == 200) {
            this.$message({
              showClose: true,
              message: '恭喜你，发布成功',
              type: 'success'
            })
          } else {
            this.$message(res.data.msg)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.grid-content {
  padding: 20px;
}
.offerforsale {
  background-color: #fff;
  margin-top: 20px;
}
/deep/.cascader {
  span {
    padding: 0 0 0 10px;
  }
}
.el-icon-refresh {
  color: red;
  font-size: 30px;
  cursor: pointer;
}
</style>
